<template>
  <footer class="flex-row">
    <div class="btn collect flex-grow flex-row flex-center" @click="toggleCollectStatus">
      <img src="@img/btn/UsedCar_collect_1@2x.png" v-if="selfCollected">
      <img src="@img/btn/UsedCar_collect_0@2x.png" v-else>
      <span :class="{ 'color-danger': selfCollected }">收藏</span>
    </div>

    <a :href="'tel:' + tel" ref="telTag"></a>
    <div class="btn call flex-grow-2 flex-row flex-center theme-btn" @click="call">电话咨询</div>
  </footer>
</template>

<script>
export default {
  props: ['tel', 'collected', 'type', 'id'],

  data (){
    return {
      // 因为vue不允许修改props，此处也不需要父子组件参数绑定，故这么写
      selfCollected: this.collected
    }
  },

  watch: {
    collected (){
      this.selfCollected = this.collected
    }
  },

  methods: {
    // 切换收藏状态
    toggleCollectStatus (){
      _api('collect/setCollectStatus', {
        f_table: this.type,
        f_id: this.id,
        status: !this.selfCollected ? 1 : 0
      }).then(data =>{
        this.selfCollected = !this.selfCollected
        this.$alert.toast(this.selfCollected ? '收藏成功' : '取消收藏', 'success')
      })
    },

    // 打电话
    call (){
      var tel = this.tel.replace(/^(\d{3})(\d{4})\d{4}$/, '$1 $2 ****')
      this.$alert.myConfirm('拨打电话咨询', tel).then(() =>{
        _api('consultRecord/add', {
          f_table: this.type,
          f_id: this.id
        })
        this.$refs.telTag.click()
      })
    } 
  }
}
</script>

<style lang="less" scoped>
footer{
  height: 50px;
  background-color: white;
  box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
  z-index: 1;

  .btn{
    height: 100%;
    font-size: 18px;

    > img{
      width: 1em;
      margin-right: 10px;
      position: relative;
      top: -1px;
    }
  }
}
</style>